<template>
    <div :style="{display:block?'none':'block'}">
      <el-row>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-form-item label="教学班名称">
            <el-input v-model="queryForm.name" placeholder="教学班名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getListClassByBar(queryForm)">查询</el-button>
            <el-button @click="resetClassQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column prop="name" label="名称"/>
          <el-table-column prop="activityName" label="活动"/>
          <el-table-column prop="classDesc" label="班级描述"/>
          <el-table-column prop="teacherName" label="教师"/>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="openAllStu(scope.row)" type="text">查看学员</el-button>
              <el-button @click="openAddCourse(scope.row)" type="text">添加课程</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <el-pagination
          background    
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4,5,6,7]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" 
          style="margin-top: 30px;"/>
      </el-row>

       <!-- 查看本班学生弹窗 -->
        <el-dialog :visible.sync="allStuDialogVisible" width="700px" title="添加学员" @closed="cancelAllStuDialog">
            <el-table 
                :data="allStuTable" 
                max-height="250"
                tooltip-effect="dark" 
                border 
                style="width: 100%">
                <el-table-column prop="stuName" width="120" label="姓名"/>
                <el-table-column prop="currentGrade" label="年级">
                <template slot-scope="scope">{{ scope.row.currentGrade || '-' }}</template>
                </el-table-column>
                <el-table-column prop="fromPlace" label="籍贯">
                <template slot-scope="scope">{{ scope.row.fromPlace || '-' }}</template>
                </el-table-column>
                <el-table-column prop="parentPhone" label="家长电话">
                <template slot-scope="scope">{{ scope.row.parentPhone || '-' }}</template>
                </el-table-column>
                <el-table-column prop="isFirst" label="是否新生">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.isFirst == '1'">否</el-tag>
                    <el-tag v-else>是</el-tag>
                </template>
                </el-table-column>
            </el-table>

            <el-row class="all-stu-btn">
                <el-button @click="cancelAllStuDialog">关闭</el-button>
            </el-row>
        </el-dialog>

        <!-- 添加课程弹窗 -->
        <el-dialog :visible.sync="courseDialogVisible" width="400px" title="添加课程" @closed="cancelDialog">
            <el-form :model="courseForm" label-position="left" label-width="80px">
                <el-form-item label="名称" prop="courseName">
                    <el-input v-model="courseForm.courseName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cancelDialog">取消</el-button>
                    <el-button type="primary" @click="confirmSubmitCourse(courseForm)">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
    import { listClass } from '@/api/class';
    import { addCourse } from '@/api/course';
    import { listStudent } from '@/api/student';
    import { getTeacherId } from '@/api/teacher';
    import { Message, MessageBox } from 'element-ui';
    export default {
        data(){
        return{
            mode:'add',
            block: false,
            currentPage:undefined,
            total:undefined,
            courseDialogVisible: false,
            allStuDialogVisible: false,
            teacherId:undefined,
            curClassId:undefined,
            queryForm:{
                name:'',
                teacherId:'',
                pageNum:1,
                pageSize:5
            },
            allStuForm:{
                clazzId : '',
                pageNum : 1,
                pageSize : 100
            },
            courseForm:{},
            tableData:[{
            activityName:'',
            className:'',
            courseName:'课程1',
            teacherName:'',
            status:1,
            }],
            allStuTable:[]
        }
        },
        methods:{
            getListClassByBar(){
                listClass(this.queryForm).then(res=>{
                    this.tableData = res.row
                }).catch(()=>{})
            },
            getListClass(){
                let id = this.$store.state.user.id || JSON.parse(localStorage.getItem('user')).id
                
                getTeacherId(id).then(res=>{
                    this.teacherId = res.data
                    this.queryForm.teacherId = res.data
                    listClass(this.queryForm).then(res=>{
                        this.tableData = res.row
                        if(!this.tableData.length){
                            this.block = true
                            MessageBox.alert(`当前教师账号未分配教学班，请联系活动管理员`).then(()=>{}).catch(()=>{})
                        }
                    }).catch(()=>{})
                })
            },
            resetClassQuery(){
                this.queryForm={
                    name:'',
                    teacherId:'',
                    pageNum:1,
                    pageSize:5
                }
                this.getListClassByBar(this.queryForm)
            },
            cancelDialog(){
                this.courseDialogVisible = false
                this.courseForm = {}
            },
            handleClick(){},
            handleEdit(data){
                console.log('数据：',data);
            },
            handleOpen(){},
            handleClose(){},
            openAllStu(data){
                this.allStuDialogVisible = true
                this.curClassId = data.id
                this.allStuForm = {
                    clazzId : data.id,
                    pageNum : 1,
                    pageSize : 100
                }
                listStudent(this.allStuForm).then(res=>{
                    this.allStuTable = res.row
                }).catch(()=>{})
            },
            cancelAllStuDialog(){
                this.allStuDialogVisible = false
                this.allStuTable = []
                this.allStuForm = {
                    pageNum : 1,
                    pageSize : 100
                }
            },
            openAddCourse(data){
                this.courseDialogVisible = true
                this.courseForm.activityId = data.activityId
                this.courseForm.classId = data.id
                this.curClassId = data.id
            },
            confirmSubmitCourse(data){
                data.teacherId = this.teacherId
                addCourse(data).then(res=>{
                    Message.success(res.msg)
                    this.courseDialogVisible = false
                    this.courseForm = {}
                    this.curClassId = undefined
                }).catch(()=>{})
            },
            handleSizeChange(size){
                this.queryForm.pageSize=size
                this.getListCourse(this.queryForm)
            },
            handleCurrentChange(page){
                this.queryForm.pageNum=page
                this.getListCourse(this.queryForm)
            },
        },
        created(){
        this.getListClass()
        }
    }
</script>
  
<style>
.all-stu-btn{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>